<template>
	<view>
		<view class="one">
			<view class="u-p-20  u-flex">
				<u-image :src="userinfo.avatar" mode="aspectFill" width="93rpx" height='93rpx' shape="circle">
				</u-image>
				<view class="u-h-100 u-m-l-24">
					<view class="">
						<view class="u-flex">
							<view class="u-weight cl_FFF">{{userinfo.name}}</view>
							<view class="u-flex u-m-l-20" style="padding: 4rpx 10rpx;background-color: #F36016;">
								<view class="u-h-40">
									<u-image src='https://www.sqkjkj.vip/wxImg/join/img2.png' width='23rpx' height='23rpx'></u-image>
								</view>


								<view v-if="userinfo.agent_info" class="u-font-26 cl_FFF">{{userinfo.agent_info.agent_title}}</view>
							</view>
						</view>
					</view>
					<view class="cl_FFF u-font-26 u-m-t-20">{{userinfo.mobile}}</view>
				</view>
			</view>
		</view>
		
		<view class="bg_FFFFFF u-p-20 " style="margin-top: -50rpx;border-radius: 20rpx 20rpx 0 0;">
			<view class="u-flex u-p-20">
				<view class="u-w-6 u-h-24 u-b-r-4" style="background-color:#FF5C23;"></view>
				<view class="u-p-l-20 u-weight">团队数据</view>
			</view>
			<view  class="" v-if="userinfo && userinfo.team_data">
				<u-row>
					<u-col span='4'>
						<view class="u-b-r-20 u-m-t-20 u-text-center" style="background-color: #F7F6F2;">
							<view class="u-font-20" style="color: #454545;padding: 30rpx 0;">区域提成</view>
							<view class="u-weight u-font-30 u-p-b-50">￥{{userinfo.team_data.area_commission}}</view>
						</view>
					</u-col>

					<u-col span='4'>
						<view class="u-b-r-20 u-m-t-20 u-text-center" style="background-color: #F7F6F2;">
							<view class="u-font-20" style="color: #454545;padding: 30rpx 0;">团队人数</view>
							<view class="u-weight u-font-30 u-p-b-50">{{userinfo.team_data.team_num}}</view>
						</view>
					</u-col>

					<u-col span='4'>
						<view class="u-b-r-20 u-m-t-20 u-text-center" style="background-color: #F7F6F2;">
							<view class="u-font-20" style="color: #454545;padding: 30rpx 0;">直推奖励</view>
							<view class="u-weight u-flex u-font-30 u-p-b-50 u-m-l-60">
								<view class="u-h-40">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/money.png" mode="aspectFill" width="20rpx"
										height='22rpx'></u-image>
								</view>

								<view class="">￥{{userinfo.team_data.zt_reward}}</view>
							</view>
						</view>
					</u-col>

					 <u-col span='4'>
						<view class="u-b-r-20 u-m-t-20 u-text-center" style="background-color: #F7F6F2;">
							<view class="u-font-20" style="color: #454545;padding: 30rpx 0;">间推奖励</view>
							<view class="u-weight u-flex u-font-30 u-p-b-50 u-m-l-60">
								<view class="u-h-40">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/money.png" mode="aspectFill" width="20rpx"
										height='22rpx'></u-image>
								</view>

								<view class="">￥{{userinfo.team_data.jt_reward}}</view>
							</view>
						</view>
					</u-col>
					<u-col span='4'>
						<view @click="$u.route('/subcontract/team/merchantData/merchantData')" class="u-b-r-20 u-m-t-20 u-text-center" style="background-color: #F7F6F2;">
							<view class="u-font-20" style="color: #454545;padding: 30rpx 0;">商户数量</view>
							<view class="u-weight u-font-30 u-p-b-50">{{userinfo.team_data.shoper_count}}</view>
						</view>
					</u-col>
					<u-col span='4'>
						<view class="u-b-r-20 u-m-t-20 u-text-center" style="background-color: #F7F6F2;">
							<view class="u-font-20" style="color: #454545;padding: 30rpx 0;">商户订单提成</view>
							<view class="u-weight u-font-30 u-p-b-50">￥{{userinfo.team_data.shoper_commission}}</view>
						</view>
					</u-col>
				
				</u-row>
			</view>
		</view>
		
		<!-- 团队详情 -->
		<view class="u-m-t-20" v-if="userinfo && userinfo.team_detail_list">
			<view class="u-p-20 bg_FFFFFF">
				<view class="u-flex u-row-between">
					<view class="u-flex u-p-20">
						<view class="u-w-6 u-h-24 u-b-r-4" style="background-color:#FF5C23;"></view>
						<view class="u-p-l-20 u-weight">团队数据</view>
						<view class="u-font-20 u-m-l-10">(市代理<text style="color: #FF3846;">{{userinfo.team_detail_list.total}}</text>)</view>
					</view>
					<view class="u-weight" @click="$u.route('/subcontract/team/mynextteam/mynextteam?num=1')">查看全部</view>
				</view>
				<view v-for="(item,index) in userinfo.team_detail_list.data" :key="index" class="u-p-20" style="border-bottom: 1rpx solid #EAEAEA;">
					<view class=" u-flex">
						<u-image :src="item.avatar" mode="aspectFit" width="80rpx" height='80rpx'
							shape="circle">
						</u-image>
						<view class="u-h-100 u-m-l-24">
							<view class="u-flex u-w-580 u-row-between">
								<view class="u-flex">
									<view class="u-weight u-font-28">{{item.name}}</view>
									<view class="u-flex u-m-l-20"
										style="padding: 4rpx 10rpx;background-color:rgba(255,141,144,0.12);">
										<view class="u-h-40">
											<u-image src='https://www.sqkjkj.vip/wxImg/join/img2.png' width='23rpx' height='23rpx'>
											</u-image>
										</view>

										<view class="u-font-20 " style="color: #FF3846;">{{item.agent_title}}</view>
									</view>
								</view>
								<u-icon name='arrow-right' color='#1C1C1C'
									@click="$u.route('/subcontract/team/mynextteam/mynextteam?num=2')"></u-icon>
							</view>

							<view class=" u-font-20 u-flex u-row-between">
								<view class="">{{item.mobile}}</view>
								<view style="color: #898989;">{{item.create_time}}注册</view>
							</view>
						</view>

					</view>

					<view class="u-flex u-row-between u-m-t-26">
						<view class="u-flex u-font-20">
							<view class="" style="color: #454545;">区域人数:</view>
							<view class="" style="color: #FF3846;">{{item.area_num}}</view>
						</view>

						<view class="u-flex u-font-20">
							<view class="" style="color: #454545;">奖励金额:</view>
							<view class="" style="color: #FF3846;">{{item.bonus}}</view>
						</view>
					</view>
				
				
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:'',
			}
		},
		onLoad() {
			this.massage()
		},
		methods: {
			massage(){
				this.$api.my_team({},res=>{
					if(res.data.code==1){
						this.userinfo=res.data.data
					}
				})
			},
			// 点击返回
			backs() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}

	.one {
		width: 750rpx;
		height: 200rpx;
		background: url('https://www.sqkjkj.vip/wxImg/team/img.png') no-repeat;
		background-size: 100% 100%;
	}
</style>
